<template>
  <div class="edit-component">
    <el-form :inline="true" :model="formData" :rules="validatorRules" ref="formData" class="demo-form-inline">
      <el-form-item label="场所名称" prop="name">
        <el-input v-model="formData.name" maxlength="20" placeholder="请输入场所名称"></el-input>
      </el-form-item>
      <el-form-item label="场所类型" prop="placeType">
        <el-select v-model="formData.placeType" placeholder="请选择场所类型">
            <el-option v-for="item in areaplaceTypeList" :label="item.name" :value="item.name" :key="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="场所责任人" prop="responsible">
        <el-input v-model="formData.responsible" readonly placeholder="请选择责任人(点击右侧加号)" suffix-icon="">
			<i slot="suffix" class="icon el-icon-circle-plus-outline" @click="openSelector"></i>
		</el-input>
      </el-form-item>
      <el-form-item label="备注" prop="remark"  >
        <el-input v-model="formData.remark" maxlength="100" placeholder="请输入备注"></el-input>
      </el-form-item>
    </el-form>
    <div class="button-bar">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="submit" :loading="btnLoading">确 定</el-button>
      <el-button type="primary" @click="resetForm">重 置</el-button>
    </div>
    <userSelector class="uselector" ref="userSelector" :initData="formData.responsible" @output="checkedUser" limit="3"></userSelector>
  </div>
</template>
<script>
import treeMixin from "@/components/tree/tree.mixin.js"
import userSelector from "@/components/userSelector"
  export default {
    mixins:[treeMixin],
	components:{userSelector},
    props:{
      initData:{
        type:Object,
        default:()=>{},
        required:false,
      },
    },
    data(){
      return{
        areaplaceTypeList:[],//场所等级
        formData:{
          id:'',
          name:'',
		  placeType:"",
          responsible:"",
		  responsibleId:"",
          remark:''
        },
        validatorRules:{
          name:[
            {required: true, message: '请输入', trigger: 'blur'},
          ],
          placeType:[
            {required: true, message: '请选择', trigger: 'blur'},
          ],
          responsible:[
            {required: true, message: '请输入', trigger: 'blur'},
          ]
        },
		btnLoading:false
      }
    },
    watch:{
      initData:{
        handler(newVal){
			if(newVal){
				this.formData=Object.assign({},newVal);
			}else{
				this.resetForm()
			}
        },
        deep:true
      }
    
    },
    methods:{
      submit(){
        var isValidate=false
        this.$refs.formData.validate((bool)=>{
            isValidate=bool
        })
        if(!isValidate){return}
        let submitData=this.formData;
        this.btnLoading=true
        this.$http.editArea(submitData)
        .then((res)=>{
          this.$message.success("操作成功！")
          this.resetForm()
          this.$emit("refresh")
          this.$emit('closeDialog',false)
		  this.btnLoading=false
        }).catch((err)=>{
			this.btnLoading=false
           throw(err)
        })
        
      },

      resetForm(){
		  this.$refs.formData.resetFields()
        for(var key in this.formData){
          this.formData[key]=""
        }
      },

      cancel(){
        this.resetForm()
        this.$emit("refresh")
        this.$emit('closeDialog',false)
      },

      //获取场所类型
      getAreaplaceTypeList(){
          var submitData={parentCode:'fixedPlace'}
          this.$http.getDictKeyList(submitData)
          .then((res)=>{
              var data=res.data.data ||[];
              this.areaplaceTypeList=data
          }).catch((err)=>{
              throw(err)
          })
      },
	  
	  openSelector(){
		  this.$refs.userSelector.showDialog=true
	  },
	  
	  checkedUser(users){
		  var ids=users.map((item)=>{
			  return item.id
		  }).toString()
		  var names=users.map((item)=>{
			  return item.name
		  }).toString()
		  this.$set(this.formData,"responsibleId",ids)
		  this.$set(this.formData,"responsible",names)
	  }

    },

    created(){
      this.getAreaplaceTypeList()
    }
    
  }
</script>



